﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>农作物管理</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/bootstrap.min.css" />
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
    <script>
        let pageIndex = 1, token = '';
        window.onload = function () {
            token = sessionStorage.getItem('token');
            const timer = setInterval(function () {
                if (token) {
                    $.ajax({
                        url: "/api/crops/getPaging?pageIndex=" + pageIndex,
                        type: "get",
                        contentType: "application/json",
                        headers: {
                            "Authorization": "Bearer " + token
                        },
                        success: function (res) {
                            if (res?.success) {
                                $.each(res.result.data, function (index, value) {
                                    let box = `<tr><td>${index}</td><td>${value.name}</td><td>${value.temperature}</td><td>${value.illumination}</td><td>${value.humidity}</td><td>${value.active}</td><td>
                                    <button class="btn btn-primary" onclick="edit('${value.id}','${value.name}','${value.temperature}','${value.illumination}','${value.humidity}','${value.active}')">编辑</button><button class="btn btn-primary" style="margin-left:8px" onclick="del('${value.id}')">删除</button></td></tr>`;
                                    $('#listBox').append(box);
                                });
                            } else
                                alert(res?.message);
                        }
                    });
                }
                clearInterval(timer);
            }, 1000);
        }
        function edit(id, name, temperature, illumination, humidity, active) {
            $('#areaId').val(id);
            $('#areaName').val(name);
            $('#temperature').val(temperature);
            $('#illumination').val(illumination);
            $('#humidity').val(humidity);
            $('#isActive').val(active.toLowerCase() == 'true' ? 0 : 1);
            $('#saveModal').modal('show');
        }
        function save() {
            let id = $('#areaId').val().trim();
            if (id == '') {
                $.ajax({
                    url: "/api/crops/create",
                    type: "post",
                    dataType: "json",
                    contentType: 'application/json',
                    headers: {
                        "Authorization": "Bearer " + token
                    },
                    data: JSON.stringify({
                        name: $('#areaName').val(),
                        temperature: $('#temperature').val(),
                        illumination: $('#illumination').val(),
                        humidity: $('#humidity').val(),
                        active: $('#isActive').val() == '0'
                    }),
                    success: function (res) {
                        if (res?.success)
                            window.location.href = window.location.href;
                        else
                            alert(res?.message);
                    }
                });
            } else {
                $.ajax({
                    url: "/api/crops/update",
                    type: "post",
                    dataType: "json",
                    contentType: 'application/json',
                    headers: {
                        "Authorization": "Bearer " + token
                    },
                    data: JSON.stringify({
                        id: id,
                        name: $('#areaName').val(),
                        temperature: $('#temperature').val(),
                        illumination: $('#illumination').val(),
                        humidity: $('#humidity').val(),
                        active: $('#isActive').val() == '0'
                    }),
                    success: function (res) {
                        if (res?.success)
                            window.location.href = window.location.href;
                        else
                            alert(res?.message);
                    }
                });
            }
        }
        function del(id) {
            if (id) {
                $.ajax({
                    url: "/api/crops/del?cropId=" + id,
                    type: "delete",
                    contentType: 'application/json',
                    headers: {
                        "Authorization": "Bearer " + token
                    },
                    success: function (res) {
                        if (res?.success)
                            window.location.href = window.location.href;
                        else
                            alert(res?.message);
                    }
                });
            }
        }</script>
</head>

<body>
    <div>
        <h2 style="margin:12px">区域管理</h2>
        <hr />
        <div class="container">
            <button class="btn btn-primary" onclick="javascript: $('#areaId').val('');" data-toggle="modal"
                data-target="#saveModal">
                新增
            </button>
        </div>
        <table class="table" id="listBox" style="margin-top:12px">
            <tr>
                <td>#</td>
                <td>名称</td>
                <td>温度</td>
                <td>湿度</td>
                <td>光照</td>
                <td>状态</td>
                <td>操作</td>
            </tr>
        </table>
        <hr />
        <nav aria-label="Page navigation" style="margin-right:12px">
            <ul class="pagination justify-content-end">
                <li class="page-item disabled">
                    <a class="page-link">上一页</a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="#">下一页</a>
                </li>
            </ul>
        </nav>
    </div>

    <div id="saveModal" class="modal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">保存区域</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="areaId" />
                    <div class="form-group row">
                        <label for="areaName" class="col-sm-4 col-form-label">名称</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="areaName">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="temperature" class="col-sm-4 col-form-label">温度</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="temperature">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="areaCodew" class="col-sm-4 col-form-label">湿度</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="humidity">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="illumination" class="col-sm-4 col-form-label">光照</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="illumination">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="isActive" class="col-sm-4 col-form-label">状态</label>
                        <div class="col-sm-8">
                            <select id="isActive" class="form-control">
                                <option value="0" selected>启用</option>
                                <option value="1">禁用</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="save()">保存</button>
                </div>
            </div>
        </div>
    </div>
</body>

</html>